<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用JQuery UI插件以拖动的方式管理图片</title>
<script type="text/javascript" src="lib/jquery-2.1.1.js"></script>
<script type="text/javascript" src="lib/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="8-9.css">

<script type="text/javascript">
	$(function(){
		var $photo = $("#photo");
		var $trash = $("#trash");
		$("li",$photo).draggable({
			revert:"invalid",
			helper:"clone",
			cursor:"move"
		});

		$trash.droppable({
			accept:"#photo li",
			activeClass:"highlight",
			drop:function(event,ui){
				deleteImage(ui.draggable)
			}
		});

		$photo.droppable({
			accept:"#trash li",
			activeClass:"active",
			drop:function(event,ui){
				recyleImage(ui.draggable);
			}
		});

		var recylelink = "<a href='#' title='从回收站还原' class='phrefresh'>还原</a>";
		function deleteImage($item){
			$item.fadeOut(function(){
				var $list = $("<ul class='photo reset'/>").appendTo($trash);
				$item.find("a.phtrash").remove();
				$item.append(recylelink).appendTo($list).fadeIn(function(){
					$item.animate({width:"100px"}).find("img").animate({height:"100px"});
				});
			});
		}

		var trashlink = "<a href='#' title='放入回收站' class='phtrash'>删除</a>";
		function recyleImage($item){
			$item.fadeOut(function(){
				$item.find("a.phrefresh").remove().end().css("width","100px").append(trashlink).find("img").css("height","100px").end().appendTo($photo).fadeIn();
			});
		}

		$("ul.photo li").click(function(event){
			var $item = $(this),$target = $(event.target);
			if($target.is("a.phtrash")){
				deleteImage($item);
			}else if($target.is("a.phrefresh")){
				recyleImage($item);
			}
			return false;
		});

		
	});

	
</script>
</head>
<body>
	<div class="phframe">
		<ul id="photo" class="photo">
			<li class="photoframecontent photoframetr">
				<h5 class="photoframeheader">图片1</h5>
				<img src="../Images/001.gif" alt = "" width="100px" height="100px"/>
				<span>图片1说明</span>
				<a href="#" title="放入回收站" class="phtrash">删除</a>
			</li>
			<li class="photoframecontent photoframetr">
				<h5 class="photoframeheader">图片2</h5>
				<img src="../Images/002.gif" alt = "" width="100px" height="100px"/>
				<span>图片2说明</span>
				<a href="#" title="放入回收站" class="phtrash">删除</a>
			</li>
			<li class="photoframecontent photoframetr">
				<h5 class="photoframeheader">图片3</h5>
				<img src="../Images/003.gif" alt = "" width="100px" height="100px"/>
				<span>图片3说明</span>
				<a href="#" title="放入回收站" class="phtrash">删除</a>
			</li>
		</ul>
		<div id="trash" class="photoframecontent">
			<h4 class="photoframeheader">回收站</h4>
		</div>
	</div>
	
</body>
</html>